<template>
	<view class="order">
		<!-- 我的订单页 -->
		<view class="noPay" v-if="noPay">待支付订单：</view>
		<view v-for="item in detailList" :key="item.id" class="list" v-if="item.status==0">
			<view>路 线 ：<text>{{item.path}}</text></view>
			<view>价 格 ：<text>{{item.price}}元</text></view>
			<view>起 点 ：<text>{{item.start}}</text></view>
			<view>终 点 ：<text>{{item.end}}</text></view>
			<view>订单状态：<text>{{item.status==0?'待支付':'已支付'}}</text></view>
			<view>用 户 i d ：<text>{{item.userId}}</text></view>
			<view>用户姓名：<text>{{item.userName}}</text></view>
			<view>用户电话：<text>{{item.userTel}}</text></view>
		</view>
		
		<view class="isPay" v-if="isPay">已支付订单：</view>
		<view v-for="item in detailList" :key="item.id" class="list" v-if="item.status!=0">
			<view>路 线 ：<text>{{item.path}}</text></view>
			<view>价 格 ：<text>{{item.price}}元</text></view>
			<view>起 点 ：<text>{{item.start}}</text></view>
			<view>终 点 ：<text>{{item.end}}</text></view>
			<view>订单状态：<text>{{item.status==0?'待支付':'已支付'}}</text></view>
			<view>用 户 i d ：<text>{{item.userId}}</text></view>
			<view>用户姓名：<text>{{item.userName}}</text></view>
			<view>用户电话：<text>{{item.userTel}}</text></view>
		</view>
		
		<view v-if="detailList==''" class="noData">暂无订单</view>
	</view>
</template>

<script>
	import {http} from "../../utils/request.js"
	export default {
		data() {
			return {
				detailList:[],
				noPay:false,
				isPay:false
			};
		},
		onLoad() {
			this.getDetail()
		},
		methods:{
			// 获取订单列表
			getDetail(){
				http({
					url:"/prod-api/api/bus/order/list"
				}).then(res=>{
					if(res.data.code==200){
						// 数组倒序,让新增的订单排在前面
						this.detailList=res.data.rows.reverse()
						// 遍历数组,判断是否存在待支付/已支付订单
						// 通过改变noPay,isPay的值来确定是否显示待支付/已支付订单
						for (let i in this.detailList) {
						    if(this.detailList[i].status==0){
								this.noPay=true
							}else{
								this.isPay=true
							}
						}
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.order{
	padding: 40rpx;
	.noPay{
		font-weight: bold;
		margin-left: 10rpx;
	}
	.isPay{
		margin-top: 40rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	.list{
		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 40rpx;
		view{
			font-weight: normal;
			text{
				font-weight: bold;
			}
		}
	}
	.list:nth-child(1){
		margin-top: 0;
	}
	.noData{
		text-align: center;
		font-weight: bold;
		font-size: 50rpx;
		color: #ccc;
	}
}
</style>
